<template>
	<view class="login">

		<view class="input_wrap">
			<image class="icon" mode="aspectFit" src="../../../static/image/public/admin.png"></image>
			<input class="input_insert" type="text" placeholder="请输入用户名" v-model="login.username" @input="clearInput" />
			<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
		</view>
		<view class="input_wrap">
			<image class="icon" mode="aspectFit" src="../../../static/image/public/password.png"></image>
			<input class="input_insert" placeholder="请输入密码" v-model="login.password" :password="showPassword"
				@input="eyeInput" />
			<text class="uni-icon" v-if="showEyeIcon" :class="[!showPassword ? 'uni-eye-active' : '']"
				@click="changePassword">&#xe568;</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showClearIcon: false,
				showEyeIcon: false,
				showPassword: true,
				login: {
					username: null,
					password: null
				}
			}
		},
		methods: {
			clearInput(e) {
				if (e.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon() {
				this.login.username = "";
				this.showClearIcon = false;
			},
			eyeInput(e) {
				if (e.detail.value.length > 0) {
					this.showEyeIcon = true;
				} else {
					this.showEyeIcon = false;
					this.showPassword = true;
				}
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
		},
	}
</script>

<style scoped lang="scss">
	.input_wrap {
		display: flex;
		background: #F8F8F8;
		border-radius: 44px;
		height: 88rpx;
		align-items: center;
		margin-bottom: 30rpx;
		overflow: hidden;

		input {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
		}
	}

	.icon {
		width: 28rpx;
		height: 36rpx;
		margin: 0 36rpx;
	}

	.input_insert {
		font-size: 28rpx;
	}

	.uni-icon {
		font-family: uniicons;
		font-size: 40rpx;
		font-weight: normal;
		font-style: normal;
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		color: #dcdcdc;
		margin: 0 28rpx
	}

	.uni-eye-active {
		color: #31C6DB;
	}
</style>
